import React, { memo, useState } from 'react'
import { useNavigate } from 'react-router-dom'

import { getCloseAbm, setCloseAbm, setUsername } from "@/utils/storageUtil"

import avatarImg from "@/assets/images/hospital/avatar.png"
import arrowRtImg from "@/assets/images/hospital/arrow_rt.png"
import abmTipImg from "@/assets/images/hospital/abm_tip.png"
import abmCloseImg from "@/assets/images/hospital/abm_close.png"


function Infomation(props) {

    const navigate = useNavigate();

    setUsername(props.name);

    //点击查看健康档案
    const clickHlthBtn = () => {
        navigate("/archives")
    }
    
    //获取存储是否关闭页面的样式
    const [isCloseAbm, setIsCloseAbm] = useState(getCloseAbm());

    //点击关闭页面
    const clickCloseBtn = () => {
        setIsCloseAbm("1");
        setCloseAbm();
    }

    return (
        <div className='hosHead'>

            <div className='hosHeadInfo'>
                {/* 用户头像 */}
                <div className='hosHeadAvatar'>
                    <img alt='' src={avatarImg} className='hosHeadIcon' />
                </div>

                {/* 用户姓名信息 */}
                <div className='hosHeadRight'>
                    <div className='hosHeadName'>{props.name}</div>
                    <div className='hosHeadHlth' onClick={clickHlthBtn}>
                        <span>健康档案</span>
                        <img alt='' src={arrowRtImg} className='hosHeadHlthIcon' />
                    </div>
                </div>
            </div>

            {/* 心率异常信息 */}
            {
                props.lastAbnormal && isCloseAbm === "0" && (
                    <div className='hosHeadAbm'>
                        <div className='hosHeadAbmLeft'>
                            <img alt='' src={abmTipImg} className='hosHeadAbmIcon' />
                        </div>
                        <div className='hosHeadAbmCenter'>
                            {props.lastAbnormal}
                        </div>
                        <div className='hosHeadAbmRight' onClick={clickCloseBtn}>
                            <img alt='' src={abmCloseImg} className='hosHeadAbmClose' />
                        </div>
                    </div>
                )
            }
            
        </div>
    )
}

export default memo(Infomation);
